<template>
    <div class="card">
        <div class="title">
        <h4 class="normal" @click="router()">   
            <img class="title_icon" src="../../assets/title.png" alt />
            &nbsp;报警状态
        </h4>
        </div>
        <div class="table_wrap" >
            <vue-seamless-scroll :data="WarnData" :class-option="defaultOption" class="seamless-warp">
                 <ul>
                    <span v-if="WarnData.length == 0">暂无报警信息</span>
                    <li class="item"  v-for="item in WarnData" :key="item.index">
                        <div class="data overflowHidden">{{item.name}}</div>
                        <div class="data overflowHidden">{{item.time}}</div>
                        <div class="data overflowHidden" style="color: #f56c6c;">
                            <span v-if="item.id >= 0">{{item.idname}}</span>
                            {{item.errorinfo}}</div>
                    </li>
                </ul>
            </vue-seamless-scroll>
        </div>
    </div>
</template>

<script>
export default {
    props: ['nowIndex', 'cardData', 'nowId'],
    data () {
        return{
            timer1: '',
            WarnData:[]
        }
    },
    created(){
        this.parseData()
        this.$nextTick(() => {
             this.timer1 = setInterval(() => {
                setTimeout(this.parseData(), 0);
            }, 3000); 
        })
    },
    computed: {
        // 跳转
        router(){
            var grade = localStorage.getItem("当前用户权限")
            if(grade == '高级管理员' || grade == '普通管理员' || grade == '普通用户' || grade == '第三方用户'){
                this.$router.push({'path':'/warnSet'});
            }
        },
        defaultOption () {
                return {
                    limitMoveNum: 7,// 开始无缝滚动的数据量 this.dataList.length
                   // hoverStop: false,
                    singleHeight: 26
                }   
        }
    },
    methods: {
        parseData(){
            this.WarnData = JSON.parse(localStorage.getItem("warnData"))
        },
    },
     // 清除定时器
    beforeDestroy() {
        clearInterval(this.timer1);
        this.timer1 = null;
    },
}
</script>

<style scoped>
.table_wrap .data{
    display: inline;
}
.seamless-warp {
    height: 210px;
    overflow: hidden;
    padding: 0px 20px;
}
.seamless-warp ul{
    height: auto;
    padding: 0px 10px 0px 20px;
}
.item{
        color:#fff;
        font-size:14px;
        display:flex;
        line-height:32px;
    }
    .item .data:nth-child(1){
        flex:20%;
    }
    .item .data:nth-child(2){
        flex:20%;
    }
    .item .data:nth-child(3){
        flex:30%;
    }

    
</style>